import { Component } from '@angular/core';
import { NzFlexModule } from 'ng-zorro-antd/flex';

@Component({
  selector: 'app-flex-basic',
  standalone: true,
  imports: [NzFlexModule],
  template: `
    <div class="demo">
      <div nz-flex nzVertical>
        <div class="flex-item">A</div>
        <div class="flex-item even">B</div>
        <div class="flex-item">C</div>
        <div class="flex-item even">D</div>
      </div>
    </div>
  `,
  styles: [
    `
      .flex-item {
        width: 25%;
        text-align: center;
        background-color: var(--bs-primary);
        color: white;
      }

      .even {
        background-color: var(--bs-success);
      }
    `,
  ],
})
export class FlexBasicComponent {}
